<template>
<div class="menu-container">
  <div @click="skip(item.name)" v-for="(item,index) in bar" :key="index" class="menu-trim"
       :class="nameActive === item.name ?'active':''">
      <div class="menu-icon">
        <Icon :type="item.type"/>
      </div>
    <span>{{item.text}}</span>
  </div>
</div>
</template>

<script>
import Icon from '@/components/Icon'
export default {
  name: 'index',
  components: {
    Icon
  },
  props: {
    bar: {
      type: Array,
      required: true
      // type:icon,text:文字，path跳转路径
    }
  },
  data () {
    return {
      nameActive: 'index'
    }
  },
  created () {
    const pathName = sessionStorage.getItem('name')
    if (pathName) {
      this.nameActive = pathName
      // 测试暂时不合格
      // if (this.$route.name !== pathName) {
      //   this.$router.push({ name: pathName })
      // }
    }
  },
  methods: {
    skip (name) {
      const pathName = sessionStorage.getItem('name')
      if (pathName !== name) {
        sessionStorage.setItem('name', name)
        this.nameActive = name
        this.$router.push({ name: name })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../../styles/var";
  .menu-container{
    color: @gray;
    width: 100%;
    margin: 24px 0px;
    .menu-trim{
      padding: 0 50px;
      display: flex;
      align-items: center;
      height: 45px;
      cursor: pointer;
      .menu-icon{
        width: 24px;
      }
      &:hover{
        color: #ffffff;
      }
      &.active{
        color: #ffffff;
        background-color: #2d2d2d;
      }
    }
  }
</style>
